<template>
  <div class="video-previewer w-full h-full relative">
    <img class="cover h-full" :src="cover" />
    <img class="absolute" src="static/icons/play-transparent.png" />
  </div>
</template>

<script>
import { getVideoCover } from '@/utils'

export default {
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      cover:
        ''
    }
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    init() {
      const { src } = this

      if (!src) return

      getVideoCover(src).then((cover) => {
        this.cover = cover
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.video-previewer {
  .cover {
    object-fit: cover;

    & + img {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
    }
  }
}
</style>
